<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>选择地址</title>
    <link rel="stylesheet" type="text/css" href="./libs/api.css" />
    <link rel="stylesheet" type="text/css" href="./libs/aui.css" />
    <link rel="stylesheet" type="text/css" href="./mo_bmapaddress.css" />
</head>

<body>
    <div class="mo-bmap-container" id="page" v-cloak>
        <header class="mo-bmap-header">
            <div class="mo-bmap-header-left" onclick="map_address_back()"></div>
            <div class="mo-bmap-header-city" @click="openCitylist()"><span class="span1">{{city}}</span><span class="span2"></span></div>
            <div class="mo-bmap-header-searchdiv">
                <img class="img1" src="./image/map1.png" />
                <div class="input">
                    <input type="text" v-model="search" @input="search_change" placeholder="请输入地址进行搜索" />
                </div>
                <img class="img2" v-if="search_show == 1" @click="search_del_val" src="./image/map3.png" />
            </div>
        </header>
        <div class="mo-bmap-lists">
            <div class="mo-bmap-list" v-for="(vo,key) in add_list" @click="sure_add(key)">
                <p class="add1">{{vo.name}}</p>
                <p class="add2">{{vo.address}}</p>
            </div>
            <p class="nodataimg" v-if="!add_list.length">暂无地址数据</p>
        </div>
    </div>
</body>
<script type="text/javascript" src="./libs/api.js"></script>
<script type="text/javascript" src="./libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./libs/vue.min.js"></script>
<script type="text/javascript">
    var timer
    var vue = new Vue({
        el: '#page',
        data: {
            city: '获取地址中', //当前城市
            search: '', //搜索内容
            search_show: 0, //搜索显示
            add_list: [], //地图地址列表
            lat: '', //纬度
            lon: '', //经度
        },
        methods: {
            openCitylist: function() {
                api.openWin({
                    name: 'mo_bmapaddress_citylist',
                    url: 'mo_bmapaddress_citylist.html',
                    pageParam: {}
                });
            },
            //确定地址
            sure_add: function(key) {
                //确定地址后返回数据
                api.sendEvent({
                    name: 'bmpaddressBack',
                    extra: {
                        add_info: vue.add_list[key]
                    }
                });
                map_address_back();
            },
            //搜索框内容删除
            search_del_val: function() {
                vue.search_show = 0;
                vue.search = '';
            },
            //搜索框内容改变
            search_change: function() {
                if(timer){
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    if (vue.search == '') {
                        vue.search_show = 0;
                    } else {
                        vue.search_show = 1;
                        if (vue.lon && vue.lat) {
                            bMaps.searchInCity({
                                city: vue.city,
                                keyword: vue.search,
                                pageIndex: 0,
                                pageCapacity: 20
                            }, function(ret, err) {
                                if (ret.status) {
                                    // console.log(JSON.stringify(ret));
                                    vue.lon = ret.results[0].lon;
                                    vue.lat = ret.results[0].lat;
                                    bMaps.setCenter({
                                        coords: {
                                            lon: vue.lon,
                                            lat: vue.lat
                                        },
                                        animation: true
                                    });
                                    bMaps.getNameFromCoords({
                                        lon: vue.lon,
                                        lat: vue.lat
                                    }, function(rets, err) {
                                        // console.log(JSON.stringify(rets));
                                        if (rets.status) {
                                            var mlist = new Array();
                                            for (var i = 0; i < ret.results.length; i++) {
                                                mlist[i] = {
                                                    'name': ret.results[i]['name'],
                                                    'address': ret.results[i]['address'],
                                                    'province': rets.province,
                                                    'city': rets.city,
                                                    'county': rets.district,
                                                    'lat': ret.results[i]['lat'],
                                                    'lon': ret.results[i]['lon']
                                                };
                                            }
                                            bMaps.removeEventListener({
                                                name: 'viewChange'
                                            });
                                            vue.add_list = [];
                                            vue.add_list = mlist;
                                            vue.$forceUpdate();
                                            setTimeout(function() {
                                                map_center();
                                            }, 1000);
                                        }
                                    });
                                } else {
                                    // console.log(JSON.stringify(err));
                                    vue.add_list = [];
                                }
                            });
                        }
                    }
                }, 500)
            },
        }
    })
    var bMaps;
    var button;
    apiready = function() {
        var header = document.querySelector('header');
        if (header) {
            $api.fixStatusBar(header);
        }
        $(".mo-bmap-lists").css({
            'height': api.winHeight - 50 - api.safeArea.top - 240,
            'top': 50 + api.safeArea.top + 240,
        });
        vue.lon = !api.pageParam.lon ? '' : api.pageParam.lon;
        vue.lat = !api.pageParam.lat ? '' : api.pageParam.lat;
        vue.city = !api.pageParam.city ? '' : api.pageParam.city;
        vue.search = !api.pageParam.search ? '' : api.pageParam.search;
        // vue.lon = '116.4021310000';
        // vue.lat = '39.9994480000';
        //如果没有传入经纬度则获取当前的位置的经纬度
        bMaps = api.require('bMap');
        if(api.systemType == 'android'){
            bMaps.setAgreePrivacy({
                agree:true
            });
        }
        button = api.require('UIButton');
        openMapInit();
        //返回键事件监听
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            map_address_back();
        });
        //选则城市监听
        api.addEventListener({
            name: 'choosemapCity'
        }, function(ret, err) {
            console.log(JSON.stringify(ret.value),'选择地址');
            if (ret.value.city) {
                vue.city = ret.value.city;
                console.log(vue.city,'地址选择')
                bMaps.getCoordsFromName({
                    city: vue.city,
                    address: vue.city
                }, function(ret, err) {
                    console.log(JSON.stringify(err),'错误');
                    if (ret.status) {
                        // console.log(JSON.stringify(ret));
                        bMaps.setCenter({
                            coords: {
                                lon: ret.lon,
                                lat: ret.lat
                            },
                            animation: true
                        });
                    } else {
                        openMapError('获取地址失败');
                    }
                });
            }
        });
    }

    //地图初始化
    function openMapInit() {
        // 初始化百度地图引擎，Android & ios都需要调用该接口进行初始化 
        bMaps.initMapSDK(function(reti) {
                // console.log(JSON.stringify(reti));
                if (reti.status) {
                    bMaps.getLocationServices(function(ret, err) {
                        // console.log(JSON.stringify(ret));
                        if (ret.enable) {
                            openMap();
                        } else {
                            openMapError('未开启定位功能');
                        }
                    });
                } else {
                    openMapError('初始化地图失败');
                }
            });
        // if (api.systemType == 'ios') {
        //     bMaps.initMapSDK(function(reti) {
        //         // console.log(JSON.stringify(reti));
        //         if (reti.status) {
        //             bMaps.getLocationServices(function(ret, err) {
        //                 // console.log(JSON.stringify(ret));
        //                 if (ret.enable) {
        //                     openMap();
        //                 } else {
        //                     openMapError('未开启定位功能');
        //                 }
        //             });
        //         } else {
        //             openMapError('初始化地图失败');
        //         }
        //     });
        // } else if (api.systemType == 'android') {
        //     bMaps.getLocationServices(function(ret, err) {
        //         // console.log(JSON.stringify(ret));
        //         if (ret.enable) {
        //             openMap();
        //         } else {
        //             openMapError('未开启定位功能');
        //         }
        //     });
        // }

    }

    //打开地图
    function openMap() {
       
        if (vue.lon && vue.lat) {
            bMaps.getNameFromCoords({
                lon: vue.lon,
                lat: vue.lat
            }, function(ret, err) {
                // console.log(JSON.stringify(err),'打开地体');
                if (ret.status) {
                    vue.city = ret.city;
                    bMaps.open({
                        rect: {
                            x: 0,
                            y: parseInt(50 + api.safeArea.top),
                            w: api.winWidth,
                            h: 240
                        },
                        center: {
                            lon: vue.lon,
                            lat: vue.lat
                        },
                        zoomLevel: 16,
                        showUserLocation: false,
                        fixedOn: api.frameName,
                        fixed: true
                    }, function(ret) {
                        if (ret.status) {
                            // console.log('地图打开成功');
                            get_add_list(vue.lon, vue.lat);
                            map_center();
                            button.open({
                                rect: {
                                    x: api.winWidth / 2 - 20,
                                    y: parseInt($("header").height()) + 120,
                                    w: 40,
                                    h: 40
                                },
                                corner: 5,
                                bg: {
                                    normal: 'widget://bMapAddress/image/map5.png',
                                    highlight: 'widget://bMapAddress/image/map5.png',
                                    active: 'widget://bMapAddress/image/map5.png'
                                },
                                fixedOn: api.frameName,
                                fixed: true,
                                move: true
                            }, function(ret, err) {});
                        } else {
                            openMapError('地图打开失败');
                        }
                    });
                } else {
                    openMapError('定位失败');
                }
            });
            return;
        } else if( vue.city && vue.search){
            bMaps.searchInCity({
                city: vue.city,
                keyword: vue.search,
                pageIndex: 0,
                pageCapacity: 20
            }, function(ret, err) {
                if (ret.status) {
                    vue.lon = ret.results[0].lon;
                    vue.lat = ret.results[0].lat;
                    bMaps.getNameFromCoords({
                        lon: vue.lon,
                        lat: vue.lat
                    }, function(ret, err) {
                        if (ret.status) {
                            // console.log(JSON.stringify(ret));
                            vue.city = ret.city;
                            bMaps.open({
                                rect: {
                                    x: 0,
                                    y: parseInt(50 + api.safeArea.top),
                                    w: api.winWidth,
                                    h: 240
                                },
                                center: {
                                    lon: vue.lon,
                                    lat: vue.lat
                                },
                                zoomLevel: 16,
                                showUserLocation: false,
                                fixedOn: api.frameName,
                                fixed: true
                            }, function(ret) {
                                if (ret.status) {
                                    // console.log('地图打开成功');
                                    get_add_list(vue.lon, vue.lat);
                                    map_center();
                                    button.open({
                                        rect: {
                                            x: api.winWidth / 2 - 20,
                                            y: parseInt($("header").height()) + 120,
                                            w: 40,
                                            h: 40
                                        },
                                        corner: 5,
                                        bg: {
                                            normal: 'widget://bMapAddress/image/map5.png',
                                            highlight: 'widget://bMapAddress/image/map5.png',
                                            active: 'widget://bMapAddress/image/map5.png'
                                        },
                                        fixedOn: api.frameName,
                                        fixed: true,
                                        move: true
                                    }, function(ret, err) {});
                                } else {
                                    openMapError('地图打开失败');
                                }
                            });
                        } else {
                            openMapError('定位失败');
                        }
                    });
                    return;
                }else{
                    bMaps.searchInCity({
                        city: vue.city,
                        keyword: vue.city,
                        pageIndex: 0,
                        pageCapacity: 20
                    }, function(ret, err) {
                        if (ret.status) {
                            vue.lon = ret.results[0].lon;
                            vue.lat = ret.results[0].lat;
                            bMaps.getNameFromCoords({
                                lon: vue.lon,
                                lat: vue.lat
                            }, function(ret, err) {
                                if (ret.status) {
                                    // console.log(JSON.stringify(ret));
                                    vue.city = ret.city;
                                    bMaps.open({
                                        rect: {
                                            x: 0,
                                            y: parseInt(50 + api.safeArea.top),
                                            w: api.winWidth,
                                            h: 240
                                        },
                                        center: {
                                            lon: vue.lon,
                                            lat: vue.lat
                                        },
                                        zoomLevel: 16,
                                        showUserLocation: false,
                                        fixedOn: api.frameName,
                                        fixed: true
                                    }, function(ret) {
                                        if (ret.status) {
                                            // console.log('地图打开成功');
                                            get_add_list(vue.lon, vue.lat);
                                            map_center();
                                            button.open({
                                                rect: {
                                                    x: api.winWidth / 2 - 20,
                                                    y: parseInt($("header").height()) + 120,
                                                    w: 40,
                                                    h: 40
                                                },
                                                corner: 5,
                                                bg: {
                                                    normal: 'widget://bMapAddress/image/map5.png',
                                                    highlight: 'widget://bMapAddress/image/map5.png',
                                                    active: 'widget://bMapAddress/image/map5.png'
                                                },
                                                fixedOn: api.frameName,
                                                fixed: true,
                                                move: true
                                            }, function(ret, err) {});
                                        } else {
                                            openMapError('地图打开失败');
                                        }
                                    });
                                } else {
                                    openMapError('定位失败');
                                }
                            });
                            return;
                        }
                    });
                }
            });
        } else {
            // console.log('打开地图')
            bMaps.getLocation({
                accuracy: '10m',
                autoStop: true,
                filter: 1
            }, function(ret, err) {
                // console.log(JSON.stringify(err),'打开地体');
                if (ret.status) {
                    // console.log(JSON.stringify(ret));
                    vue.lon = ret.lon;
                    vue.lat = ret.lat;
                    bMaps.getNameFromCoords({
                        lon: vue.lon,
                        lat: vue.lat
                    }, function(ret, err) {
                        if (ret.status) {
                            // console.log(JSON.stringify(ret));
                            vue.city = ret.city;
                            bMaps.open({
                                rect: {
                                    x: 0,
                                    y: parseInt(50 + api.safeArea.top),
                                    w: api.winWidth,
                                    h: 240
                                },
                                center: {
                                    lon: vue.lon,
                                    lat: vue.lat
                                },
                                zoomLevel: 16,
                                showUserLocation: false,
                                fixedOn: api.frameName,
                                fixed: true
                            }, function(ret) {
                                if (ret.status) {
                                    // console.log('地图打开成功');
                                    get_add_list(vue.lon, vue.lat);
                                    map_center();
                                    button.open({
                                        rect: {
                                            x: api.winWidth / 2 - 20,
                                            y: parseInt($("header").height()) + 120,
                                            w: 40,
                                            h: 40
                                        },
                                        corner: 5,
                                        bg: {
                                            normal: 'widget://bMapAddress/image/map5.png',
                                            highlight: 'widget://bMapAddress/image/map5.png',
                                            active: 'widget://bMapAddress/image/map5.png'
                                        },
                                        fixedOn: api.frameName,
                                        fixed: true,
                                        move: true
                                    }, function(ret, err) {});
                                } else {
                                    openMapError('地图打开失败');
                                }
                            });
                        } else {
                            openMapError('定位失败');
                        }
                    });
                    return;
                } else {
                    openMapError('定位失败');
                }
            });
        }
    }

    //地图打开失败提示
    function openMapError(msg) {
        api.toast({
            msg: msg,
            duration: 2000,
            location: 'bottom'
        });
    }

    // 返回上一个页面时进行的操作，关闭地图以及当前页面
    function map_address_back() {
        bMaps.close();
        api.closeWin();
    }

    //设置地图中间点
    function map_center() {
        bMaps.addEventListener({
            name: 'viewChange'
        }, function(rets) {
            if (rets.status) {
                // console.log(JSON.stringify(rets));
                bMaps.getCenter(function(ret) {
                    // console.log(ret.lon + '*' + ret.lat);
                    get_add_list(ret.lon, ret.lat);
                });
            }
        });
    }

    //获取地址列表
    function get_add_list(lon, lat) {
        bMaps.getNameFromCoords({
            lon: lon,
            lat: lat
        }, function(retss, err) {
            if (retss.status) {
                // console.log(JSON.stringify(retss));
                var mlist = new Array();
                for (var i = 0; i < retss.poiList.length; i++) {
                    mlist[i] = {
                        'name': retss.poiList[i]['name'],
                        'address': retss.poiList[i]['address'],
                        'province': retss.province,
                        'city': retss.city,
                        'county': retss.district,
                        'lat': retss.poiList[i]['coord']['lat'],
                        'lon': retss.poiList[i]['coord']['lon']
                    };
                }
                vue.add_list = mlist;
                vue.$forceUpdate();
                $(".add_list").eq(0).addClass('add_list1');
            }
        });
    }
</script>

</html>
